<!DOCTYPE html>

<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>DOH input fields witout textDir support Tests</title>

		<style type="text/css">
			@import "../../../../dijit/themes/tundra/tundra.css";
			@import "../../../../dojo/resources/dojo.css";
		</style>

		<!-- required: dojo.js -->
		<script type="text/javascript" src="../../../../dojo/dojo.js"
			data-dojo-config="async: true, isDebug: true, has: { 'dojo-bidi': true }"></script>

		<script type="text/javascript">
			require([
				"doh/runner",
				"dojo/dom",
				"dojo/parser",
				"dijit/registry",
				"dojo/domReady!"
			], function(doh, dom, parser, registry){

				doh.register("parse", {
					name: "parse",
					timeout: 10000,
					runTest: function() {
						// Parse is asynchronous because it pulls in modules like DateTextBox, so return its promise
						return parser.parse();
					}
				});

				doh.register("initial direction of the textBoxes", [
					{
						name: "Group 1",

						runTest: function(){

							var textBox1 = registry.byId("local_1"),
								textBox2 = registry.byId("local_12"),
								textBox3 = registry.byId("local_2"),
								textBox4 = registry.byId("local_22");

							doh.is("rtl", textBox1.textDir, "textDir of - " + textBox1.id);
							doh.is("", textBox1.dir, "dir of - " + textBox1.id);
							doh.t(textBox1.focusNode.dir === textBox1.textDir, "textDir != dir of - " + textBox1.id);

							doh.is("ltr", textBox2.textDir, "textDir of - " + textBox2.id);
							doh.is("", textBox2.dir, "dir of - " + textBox2.id);
							doh.t(textBox2.focusNode.dir === textBox2.textDir, "textDir != dir of - " + textBox2.id);

							doh.is("rtl", textBox3.textDir, "textDir of - " + textBox3.id);
							doh.is("rtl", textBox3.dir, "dir of - " + textBox3.id);
							doh.t(textBox3.focusNode.dir === textBox3.textDir, "textDir != dir of - " + textBox3.id);

							doh.is("ltr", textBox4.textDir, "textDir of - " + textBox4.id);
							doh.is("rtl", textBox4.dir, "dir of - " + textBox4.id);
							doh.t(textBox4.focusNode.dir === textBox4.textDir, "textDir != dir of - " + textBox4.id);
						}
					},
					{
						name: "Group 2",

						runTest: function(){

							var textBox1 = registry.byId("localLong_1"),
								textBox2 = registry.byId("localLong_12"),
								textBox3 = registry.byId("localLong_2"),
								textBox4 = registry.byId("localLong_22");

							doh.is("rtl", textBox1.textDir, "textDir of - " + textBox1.id);
							doh.is("ltr", textBox1.dir, "dir of - " + textBox1.id);
							doh.t(textBox1.focusNode.dir === textBox1.textDir, "textDir != dir of - " + textBox1.id);

							doh.is("ltr", textBox2.textDir, "textDir of - " + textBox2.id);
							doh.is("", textBox2.dir, "dir of - " + textBox2.id);
							doh.t(textBox2.focusNode.dir === textBox2.textDir, "textDir != dir of - " + textBox2.id);

							doh.is("rtl", textBox3.textDir, "textDir of - " + textBox3.id);
							doh.is("rtl", textBox3.dir, "dir of - " + textBox3.id);
							doh.t(textBox3.focusNode.dir === textBox3.textDir, "textDir != dir of - " + textBox3.id);

							doh.is("ltr", textBox4.textDir, "textDir of - " + textBox4.id);
							doh.is("rtl", textBox4.dir, "dir of - " + textBox4.id);
							doh.t(textBox4.focusNode.dir === textBox4.textDir, "textDir != dir of - " + textBox4.id);
						}
					},
					{
						name: "Group 3",

						runTest: function(){

							var textBox1 = registry.byId("integerspinner_1"),
								textBox2 = registry.byId("integerspinner_12"),
								textBox3 = registry.byId("integerspinner_2"),
								textBox4 = registry.byId("integerspinner_22");

							doh.is("rtl", textBox1.textDir, "textDir of - " + textBox1.id);
							doh.is("", textBox1.dir, "dir of - " + textBox1.id);
							doh.t(textBox1.focusNode.dir === textBox1.textDir, "textDir != dir of - " + textBox1.id);

							doh.is("ltr", textBox2.textDir, "textDir of - " + textBox2.id);
							doh.is("", textBox2.dir, "dir of - " + textBox2.id);
							doh.t(textBox2.focusNode.dir === textBox2.textDir, "textDir != dir of - " + textBox2.id);

							doh.is("rtl", textBox3.textDir, "textDir of - " + textBox3.id);
							doh.is("rtl", textBox3.dir, "dir of - " + textBox3.id);
							doh.t(textBox3.focusNode.dir === textBox3.textDir, "textDir != dir of - " + textBox3.id);

							doh.is("ltr", textBox4.textDir, "textDir of - " + textBox4.id);
							doh.is("rtl", textBox4.dir, "dir of - " + textBox4.id);
							doh.t(textBox4.focusNode.dir === textBox4.textDir, "textDir != dir of - " + textBox4.id);
						}
					},
					{
						name: "Group 4",

						runTest: function(){

							var textBox1 = registry.byId("curren_1"),
								textBox2 = registry.byId("curren_12"),
								textBox3 = registry.byId("curren_2"),
								textBox4 = registry.byId("curren_22");

							doh.is("rtl", textBox1.textDir, "textDir of - " + textBox1.id);
							doh.is("", textBox1.dir, "dir of - " + textBox1.id);
							doh.t(textBox1.focusNode.dir === textBox1.textDir, "textDir != dir of - " + textBox1.id);

							doh.is("ltr", textBox2.textDir, "textDir of - " + textBox2.id);
							doh.is("", textBox2.dir, "dir of - " + textBox2.id);
							doh.t(textBox2.focusNode.dir === textBox2.textDir, "textDir != dir of - " + textBox2.id);

							doh.is("rtl", textBox3.textDir, "textDir of - " + textBox3.id);
							doh.is("rtl", textBox3.dir, "dir of - " + textBox3.id);
							doh.t(textBox3.focusNode.dir === textBox3.textDir, "textDir != dir of - " + textBox3.id);

							doh.is("ltr", textBox4.textDir, "textDir of - " + textBox4.id);
							doh.is("rtl", textBox4.dir, "dir of - " + textBox4.id);
							doh.t(textBox4.focusNode.dir === textBox4.textDir, "textDir != dir of - " + textBox4.id);
						}
					},
					{
						name: "Group 5",

						runTest: function(){

							var textBox1 = registry.byId("q1"),
								textBox2 = registry.byId("q2"),
								textBox3 = registry.byId("q3"),
								textBox4 = registry.byId("q4");

							doh.is("rtl", textBox1.textDir, "textDir of - " + textBox1.id);
							doh.is("ltr", textBox1.dir, "dir of - " + textBox1.id);
							doh.t(textBox1.focusNode.dir === textBox1.textDir, "textDir != dir of - " + textBox1.id);

							doh.is("ltr", textBox2.textDir, "textDir of - " + textBox2.id);
							doh.is("ltr", textBox2.dir, "dir of - " + textBox2.id);
							doh.t(textBox2.focusNode.dir === textBox2.textDir, "textDir != dir of - " + textBox2.id);

							doh.is("rtl", textBox3.textDir, "textDir of - " + textBox3.id);
							doh.is("rtl", textBox3.dir, "dir of - " + textBox3.id);
							doh.t(textBox3.focusNode.dir === textBox3.textDir, "textDir != dir of - " + textBox3.id);

							doh.is("ltr", textBox4.textDir, "textDir of - " + textBox4.id);
							doh.is("rtl", textBox4.dir, "dir of - " + textBox4.id);
							doh.t(textBox4.focusNode.dir === textBox4.textDir, "textDir != dir of - " + textBox4.id);
						}
					}
				]);

				doh.run();
			});
		</script>
	</head>

	<body class="tundra">
		<h1 class="testTitle">Test DateTextBox Widget with _BidiSupport</h1>
		<div class="dojoTitlePaneLabel">
			<label for="local_1">Group 1: Date (local format) </label>
		</div>
		<div class="testExample">
			<table>
				<tr>
					<th>
						<label for="local_1"><b>dir = </b>ltr, <b>textDir = </b>rtl</label><br>
						<input id="local_1" data-dojo-type="dijit/form/DateTextBox"
							data-dojo-props='name: "noDOMvalue", value: "2008-12-31", type: "text", textDir: "rtl"'/>
					</th>
					<th>
						<label for="local_12"><b>dir = </b>ltr, <b>textDir = </b>ltr</label><br>
						<input id="local_12" data-dojo-type="dijit/form/DateTextBox"
							data-dojo-props='name: "noDOMvalue12", value: "2008-12-31", type: "text", textDir: "ltr"'/>
					</th>
				</tr>
				<tr>
					<th>
						<label for="local_2"><b>dir = </b>rtl, <b>textDir = </b>rtl</label><br>
						<input id="local_2" data-dojo-type="dijit/form/DateTextBox"
							data-dojo-props='name: "noDOMvalue2", value: "2008-12-31", type: "text", dir: "rtl", textDir: "rtl"'/>
					</th>
					<th>
						<label for="local_22"><b>dir = </b>rtl, <b>textDir = </b>ltr</label><br>
						<input id="local_22" data-dojo-type="dijit/form/DateTextBox"
							data-dojo-props='name: "noDOMvalue22", value: "2008-12-31", type: "text", dir: "rtl", textDir: "ltr"'/>
					</th>
				</tr>
			</table>
		</div>
		<div class="dojoTitlePaneLabel">
			<label for="localLong_1">Group 2: Date (local format - long) </label>
		</div>
		<div class="testExample">
			<table>
				<tr>
					<th>
						<label for="localLong_1"><b>dir = </b>ltr, <b>textDir = </b>rtl</label><br>
						<input id="localLong_1" data-dojo-id="localLong_1" data-dojo-type="dijit/form/DateTextBox"
							data-dojo-props='type: "text", name: "date1", value: "2005-12-30",
							constraints: {min: "2004-01-01", max: "2006-12-31", formatLength: "long"},
							required: true,
							trim: true,
							dir: "ltr", textDir: "rtl",
							invalidMessage: "Invalid date."'/>
					</th>
					<th>
						<label for="localLong_12"><b>dir = </b>ltr, <b>textDir = </b>ltr</label><br>
						<input id="localLong_12" data-dojo-id="localLong_12" data-dojo-type="dijit/form/DateTextBox"
							data-dojo-props='type: "text", name: "date12", value: "2005-12-30",
							constraints: {min: "2004-01-01", max: "2006-12-31", formatLength: "long"},
							required: true,
							trim: true,
							invalidMessage: "Invalid date." ,
							textDir: "ltr"'/>
					</th>
				</tr>
				<tr>
					<th>
						<label for="localLong_2"><b>dir = </b>rtl, <b>textDir = </b>rtl</label><br>
						<input id="localLong_2" data-dojo-id="localLong_2" data-dojo-type="dijit/form/DateTextBox"
							data-dojo-props='type: "text", name: "date2", value: "2005-12-30",
							constraints: {min: "2004-01-01",max: "2006-12-31",formatLength: "long"},
							required: true,
							trim: true,
							invalidMessage: "Invalid date." ,
							dir: "rtl",
							textDir: "rtl" '/>
					</th>
					<th>
						<label for="localLong_22"><b>dir = </b>rtl, <b>textDir = </b>ltr</label><br>
						<input id="localLong_22" data-dojo-id="localLong_12" data-dojo-type="dijit/form/DateTextBox"
							data-dojo-props='type: "text", name: "date12", value: "2005-12-30",
							constraints: {min: "2004-01-01",max: "2006-12-31",formatLength: "long"},
							required: true,
							trim: true,
							invalidMessage: "Invalid date." ,
							dir: "rtl",
							textDir: "ltr"'/>
					</th>
				</tr>
			</table>
		</div>

		<br>
		<h1 class="testTitle">Test NumberSpinner Widget with _BidiSupport</h1>
		<div class="dojoTitlePaneLabel">
			<label >Group 3 </label>
		</div>

		Try typing values, and use the up/down arrow keys and/or the arrow push	buttons

		<div class="testExample">
			<table>
				<tr>
					<th>
						<label for="integerspinner_1"><b>dir = </b>ltr, <b>textDir = </b>rtl </label><br>
						<input id="integerspinner_1" data-dojo-type="dijit/form/NumberSpinner"
							data-dojo-props='
							value: 900,
							"class": "bigFont",
							constraints: {max: 1550,places: 0},
							name: "integerspinner_1",
							textDir: "rtl"'/>
					</th>
					<th>
						<label for="integerspinner_12"><b>dir = </b>ltr, <b>textDir = </b>ltr </label><br>
						<input id="integerspinner_12" data-dojo-type="dijit/form/NumberSpinner"
							data-dojo-props='
							value: 900,
							"class": "bigFont",
							constraints: {max: 1550,places: 0},
							name: "integerspinner_12",
							textDir: "ltr"'/>
					</th>
				</tr>
				<tr>
					<th>
						<label for="integerspinner_2"><b>dir = </b>rtl, <b>textDir = </b>rtl </label><br>
						<input id="integerspinner_2" data-dojo-type="dijit/form/NumberSpinner"
							data-dojo-props='
							value: 900,
							"class": "bigFont",
							constraints: {max: 1550,places: 0},
							dir: "rtl",
							textDir: "rtl",
							name: "integerspinner_2"'/>
					</th>
					<th>
						<label for="integerspinner_22"><b>dir = </b>rtl, <b>textDir = </b>ltr </label><br>
						<input id="integerspinner_22" data-dojo-type="dijit/form/NumberSpinner"
							data-dojo-props='
							value: 900,
							"class": "bigFont",
							constraints: {max: 1550,places: 0},
							dir: "rtl",
							textDir: "ltr",
							name: "integerspinner_22"'/>
					</th>
				</tr>
			</table>
		</div>

		<br>
		<br>

		<h1 class="testTitle">Test CurrencyTextBox Widget with _BidiSupport</h1>
		<div class="dojoTitlePaneLabel">
			<label >Group 4</label>
		</div>
		<div class="testExample">
			<table>
				<tr>
					<th>
						<label for="curren_1"><b>dir = </b>ltr, <b>textDir = </b>rtl </label><br>
						<input id="curren_1" data-dojo-type="dijit/form/CurrencyTextBox"
							data-dojo-props='name: "curren_1", "class": "medium", value: 54775.53,
							required: true,
							constraints: {fractional: true},
							currency: "USD",
							textDir: "rtl",
							invalidMessage: "Invalid amount. Cents are MANDATORY."'/>
					</th>
					<th>
						<label for="curren_12"><b>dir = </b>ltr, <b>textDir = </b>ltr</label><br>
						<input id="curren_12" data-dojo-type="dijit/form/CurrencyTextBox"
							data-dojo-props='name: "curren_12", "class": "medium", value: 54775.53,
							required: true,
							constraints: {fractional: true},
							currency: "USD",
							invalidMessage: "Invalid amount. Cents are MANDATORY.",
							textDir: "ltr"'/>
					</th>
				</tr>
				<tr>
					<th>
						<label for="curren_2"><b>dir = </b>rtl, <b>textDir = </b>rtl </label><br>
						<input id="curren_2" data-dojo-type="dijit/form/CurrencyTextBox"
							data-dojo-props='name: "curren_2", "class": "medium", value: 54775.53,
								required: true,
								constraints: {fractional: true},
								currency: "USD",
								invalidMessage: "Invalid amount. Cents are MANDATORY.",
								textDir: "rtl",
								dir: "rtl"'/>
					</th>
					<th>
						<label for="curren_22"><b>dir = </b>rtl, <b>textDir = </b>ltr </label><br>
						<input id="curren_22" data-dojo-type="dijit/form/CurrencyTextBox"
								data-dojo-props='name: "curren_22", "class": "medium", value: 54775.53,
								required: true,
								constraints: {fractional: true},
								currency: "USD",
								invalidMessage: "Invalid amount. Cents are MANDATORY.",
								textDir: "ltr",
								dir: "rtl"'/>
					</th>
				</tr>
			</table>
		</div>

		<h1 class="testTitle">Test TimeTextBox Widget with _BidiSupport</h1>
		<div class="dojoTitlePaneLabel">
			<label >Group 5 </label>
		</div>
		<div class="testExample">
			<table>
				<tr>
					<th>
						<label for="q1"><b>dir = </b>ltr, <b>textDir = </b>rtl </label><br>
						<input id="q1" data-dojo-type="dijit/form/TimeTextBox"
							data-dojo-props='type: "text", name: "time1", value: "T17:45:00",
							constraints: {formatLength: "medium"},
							required: true,
							invalidMessage: "Invalid time.",
							textDir: "rtl",
							dir: "ltr"'/>
					</th>
					<th>
						<label for="q2"><b>dir = </b>ltr, <b>textDir = </b>ltr</label><br>
						<input id="q2" data-dojo-type="dijit/form/TimeTextBox"
							data-dojo-props='type: "text", name: "time2", value: "T17: 45: 00",
							constraints: {formatLength: "medium"},
							required: true,
							invalidMessage: "Invalid time.",
							textDir: "ltr",
							dir: "ltr"'/>
					</th>
				</tr>
				<tr>
					<th>
						<label for="q3"><b>dir = </b>rtl, <b>textDir = </b>rtl </label><br>
						<input id="q3" data-dojo-type="dijit/form/TimeTextBox"
							data-dojo-props='type: "text", name: "time3", value: "T17:45:00",
							constraints: {formatLength: "medium"},
							required: true,
							invalidMessage: "Invalid time.",
							textDir: "rtl",
							dir: "rtl"'/>
					</th>
					<th>
						<label for="q4"><b>dir = </b>rtl, <b>textDir = </b>ltr </label><br>
						<input id="q4" data-dojo-type="dijit/form/TimeTextBox"
							data-dojo-props='type: "text", name: "time4", value: "T17:45:00",
							constraints: {formatLength: "medium"},
							required: true,
							invalidMessage: "Invalid time.",
							textDir: "ltr",
							dir: "rtl"'/>
					</th>
				</tr>
			</table>
		</div>
	</body>
</html>
